import React, { Component } from 'react';
import PropTypes from 'prop-types';
import echarts from 'echarts/lib/echarts';
// 基础图表
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/radar';
import 'echarts/lib/chart/tree';
import 'echarts/lib/chart/effectScatter';
import 'echarts/lib/chart/custom';
// 组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/legend';
import copy from 'copy-to-clipboard';
import './index.less';
import { s } from '@knownsec/react-component/dist/Anchor';
import {
  Message,
} from '@knownsec/react-component';
class MyECharts extends Component {
  constructor(props) {
    super(props);
    this.wrapper = React.createRef();
    this.myChart = null;
    this.onResize = null;
    this.state = {
      style:{x:0,y:0,display:'none'},
      text:{ name:'',host:''}
    }
  }
  componentDidMount() {
    this.setOption();
  }

  componentDidUpdate() {
    this.setOption();
  }

  setOption() {
    if (!this.myChart && this.wrapper && this.wrapper.current) {
      this.myChart = echarts.init(this.wrapper.current);
      this.myChart.on('click', this.props.onClick);
      this.onResize = this.myChart.resize;
      // window.addEventListener('resize', this.onResize) //此方式改变窗体大小会使用默认100px
      window.addEventListener('resize', function () {
        this.onResize;
      });
      const {style}=this.state
      this.myChart.on('mouseover', (e)=>{
        if(e.componentType==='yAxis'){
          let clientX = e.event.event.zrX
          let clientY = e.event.event.zrY
          const x= clientX + "px"
          const y= clientY -60 + "px"
          const display='block'
          const value=e.value.split('||%%')
          if(style.x===0){
            this.setState({style:{x,y,display}})
            this.setState({text:{host:value[0],name:value[1],}})
          }
        }
      });
      this.myChart.on('mouseout', (e)=>{
        if(e.componentType==='yAxis'){
          const display='none'
          setTimeout(()=>{
            this.setState({style:{x:0,y:0,display}})
          },3000)
        }
      });
      window.addEventListener('resize', function () {
        this.onResize;
      });
    }
    if (this.myChart) {
      this.myChart.setOption(this.props.option);
    }
  }

  componentWillUnmount() {
    if (this.myChart && this.myChart.dispose) {
      this.myChart.dispose();
    }
    window.removeEventListener('resize', this.onResize);
  }
  handleCopyText (text) {
    if ( copy(text.host)) {
      Message.show({
        pro: true,
        type: 'success',
        message: '内容已复制！',
        showClose: false,
      });
    }
  }
  render() {
    const {style,text}=this.state
    return <><div className="my-echart" ref={this.wrapper} /><div className="tip" onClick={()=>{this.handleCopyText(text)}} style={{top: style.y,left:style.x,display:style.display}}><p>{text.host}<span>点击复制</span></p><p>{text.name}</p></div></>;
  }
}

MyECharts.propTypes = {
  option: PropTypes.object,
  onClick: PropTypes.func,
};

export default MyECharts;
